<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import ApprovalActionBar from '@/components/ApprovalActionBar.vue'
import { useFlow } from '@/hooks/useFlow'

// 定义页面配置
definePage({
  style: {
    navigationBarTitleText: '财务付款详情',
  },
})

// 获取路由参数
const route = useRoute()
const { id, flowId } = route.query as { id: string, flowId?: string }

// 使用流程相关功能
const { currentProcess, getProcessInstance, getCurrentUserPendingTaskId, loading } = useFlow()

// 业务详情数据
const businessData = ref<any>(null)
const errorMessage = ref('')
const flowIdValue = ref<string>('')
const idValue = ref<string>('')

// 获取业务详情数据
async function getBusinessData() {
  try {
    await getProcessInstance(idValue.value)
    // 获取当前用户待审批任务ID
    const taskId = await getCurrentUserPendingTaskId(idValue.value)
    if (taskId) {
      flowIdValue.value = taskId
    }
    // 这里需要根据实际业务接口调整
    // 暂时使用模拟数据
    // 生成统一格式的时间
    const now = new Date()
    const year = now.getFullYear()
    const month = String(now.getMonth() + 1).padStart(2, '0')
    const day = String(now.getDate()).padStart(2, '0')
    const hour = String(now.getHours()).padStart(2, '0')
    const minute = String(now.getMinutes()).padStart(2, '0')
    const second = String(now.getSeconds()).padStart(2, '0')
    const currentTime = `${year}-${month}-${day} ${hour}:${minute}:${second}`

    businessData.value = {
      id,
      createTime: currentTime,
      title: '财务付款',
      status: 'pending',
      paymentType: '转账',
      amount: '50000.00',
      payee: '供应商名称',
      accountInfo: '开户行：工商银行，账号：1234567890123456789',
      paymentReason: '采购货款支付',
    }
  }
  catch (error) {
    console.error('获取业务详情失败:', error)
    errorMessage.value = '获取业务详情失败，请重试'
  }
}

// 页面加载时获取数据
onLoad(async (e: any) => {
  if (e.flowId) {
    flowIdValue.value = e.flowId
  }
  idValue.value = e.id || ''
  if (id) {
    await Promise.all([
      getBusinessData(),
    ])
  }
})

// 页面显示时重新获取数据
onShow(async () => {
  if (id) {
    await getBusinessData()
  }
})
</script>

<template>
  <view class="page">
    <!-- 审批状态卡片 -->
    <ApprovalStatusCard :current-process="currentProcess" :id-value="idValue" />
    <!-- 基本信息卡片 -->
    <view class="card">
      <view class="card-header">
        <view class="card-title">
          基本信息
        </view>
      </view>
      <view class="card-content">
        <view class="info-item">
          <view class="info-label">
            标题
          </view>
          <view class="info-value">
            {{ businessData?.title || '-' }}
          </view>
        </view>
        <view class="info-item">
          <view class="info-label">
            创建时间
          </view>
          <view class="info-value">
            {{ businessData?.createTime || '-' }}
          </view>
        </view>
        <view class="info-item">
          <view class="info-label">
            状态
          </view>
          <view class="info-value">
            {{ businessData?.status || '-' }}
          </view>
        </view>
      </view>
    </view>

    <!-- 付款信息卡片 -->
    <view class="card">
      <view class="card-header">
        <view class="card-title">
          付款信息
        </view>
      </view>
      <view class="card-content">
        <view class="info-item">
          <view class="info-label">
            付款方式
          </view>
          <view class="info-value">
            {{ businessData?.paymentType || '-' }}
          </view>
        </view>
        <view class="info-item">
          <view class="info-label">
            付款金额
          </view>
          <view class="info-value">
            {{ businessData?.amount || '-' }}
          </view>
        </view>
        <view class="info-item">
          <view class="info-label">
            收款方
          </view>
          <view class="info-value">
            {{ businessData?.payee || '-' }}
          </view>
        </view>
        <view class="info-item">
          <view class="info-label">
            收款账户信息
          </view>
          <view class="info-value">
            {{ businessData?.accountInfo || '-' }}
          </view>
        </view>
        <view class="info-item">
          <view class="info-label">
            付款事由
          </view>
          <view class="info-value">
            {{ businessData?.paymentReason || '-' }}
          </view>
        </view>
      </view>
    </view>

    <!-- 流程信息卡片 -->
    <view class="card">
      <view class="card-header">
        <view class="card-title">
          流程信息
        </view>
      </view>
      <view class="card-content">
        <view class="info-item">
          <view class="info-label">
            流程实例ID
          </view>
          <view class="info-value">
            {{ currentProcess?.id || '-' }}
          </view>
        </view>
        <view class="info-item">
          <view class="info-label">
            流程名称
          </view>
          <view class="info-value">
            {{ currentProcess?.name || '-' }}
          </view>
        </view>
      </view>
    </view>

    <!-- 审批操作栏 -->
    <view class="approval-bar">
      <ApprovalActionBar
        v-if="flowIdValue && currentProcess?.status === 1"
        :process-id="flowIdValue"
      />
    </view>
  </view>
</template>

<style scoped>
.page {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.card {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.card-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.card-content {
  padding: 20rpx 30rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 28rpx;
  color: #666;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  text-align: right;
  flex: 1;
  margin-left: 20rpx;
  word-break: break-all;
}
</style>
